<template>
  <view style="margin: 0 20px;width: 90%;overflow: hidden;">
    <view
      class="d-flex a-center border-top px-3"
      style="height: 118upx;width: 690upx;padding-left:0upx;"
    >
      <text class="font-32" style="padding-right: 23upx;font-family: 微软雅黑;">全部栏目</text>
      <text
        class="font-26 ml-1"
        style="color: #999999;"
      >点击跳转到对应栏目</text>
    </view>
    <view class="je-grid">
      <view
        v-for="(item, index) in columnList"
        :key="index"
        @tap="skipToColumnPage(index, item.channelId)"
        class="je-item custom-btn font-28"
      >
        <text style="font-weight: 400;">{{item.channelName}}</text>
      </view>
    </view>
  </view>
</template>

<script>
import api from '@/common/lib/request.js';
export default {
  data() {
    return {
      columnList: []
    }
  },
  onLoad() {
    this._initChannelList()
  },
  methods: {
    _initChannelList() {
      api.request({
        url: '/channel/list'
      }).then(response => {
        this.columnList = response;
      }).catch(err => {
        console.log(err);
      });
    },
    skipToColumnPage(index, id) {
      const that = this;
      var pages = getCurrentPages(); //当前页面栈
      uni.switchTab({
        url: '/pages/index/index',
        success: res => {
          if (pages.length > 1) {
            var beforePage = pages[pages.length - 2]; //获取上一个页面实例对象
            beforePage.$vm.switchTab(index + 1, id); //触发父页面中的方法change()
          }
        }
      })
    }
  }
}
</script>

<style>
.custom-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 165upx;
  height: 70upx;
  background: rgba(248, 248, 248, 1);
  border-radius: 4px;
  margin-bottom: 15upx;
  color: #333333;
}
.colum-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.je-grid {
  display: flex;
  flex-wrap: wrap;
  margin: -10px;
  width: calc(100% + 20px);
}

.je-item {
  width: calc((100% / 4) - 20px);
  flex: 0 0 auto;
  margin: 0 15upx 25upx 20upx;
}
</style>
